Html Email

HTML Email兼容问题与解决方案。

HTML Email能否正常显示，完全取决于邮件客户端。大多数的邮件客户端会过滤HTML设置，让邮件面目全非。

基本规则

尽量使用table布局

目前多数邮件客户端不支持HTML5与CSS3，部分客户端不支持float属性，尽量使用table布局，尽量使用span/img/a/div/p标签。

外层table用来设置背景，内层嵌套一个table用来展示内容：

<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tbody>
        <tr>
            <td>
                <table border="0" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="640">
                    <tbody>
                        <tr>
                        </tr>
                        <tr>
                        </tr>
                    </tbody>
            </td>
        </tr>
    </tbody>
</table>

内层table需要定一个宽度，或者设置最大宽度max-width，防止超过客户端的显示宽度。邮件内容有几个部分，就在内层table分几个tr。

尽量将内容写到body内，尽量使用内联样式

有些邮件客户端会把DOCTYPE / html / head / body标签删除，在可能的情况下尽量把内容写到body内，建议将全部内容放到table内。要确保即使table外的内容被删除，布局也能正常。

要适配手机客户端：@meida。

所有的CSS规则，最好都采用内联样式。

放置在网页头部的样式，可能会被客户端删除。放在body内的style标签，也可能被客户端删除。

查看邮件客户端是否支持<style>：https://www.caniemail.com/features/html-style/

尽量不要采用CSS的简写形式，有些客户端不支持。

如果想表达<p style="margin: 16px 0;">，需要写成下面这样：

1	<p style="margin-top: 16px; margin-right: 0;margin-bottom: 16px; margin-left: 0;">

color尽可能不要使用简写：

color: #999;需要写成color: #999999;

能用属性就不要用样式

很多邮箱会对特定标签的属性做强制改造。

图片设置宽高

比如在OutLook中，图片使用以下方式来设置宽高是无效的：

1	<img style="width: 10px; height: 10px;" src="xxx" />

正确的设置方法：

1	<img width="10" height="10" src="xxx" />

加粗字体

对于加粗字体，建议使用b标签而不是设置font-weight。

图片

图片是唯一可以引用的外部资源。其他的外部资源一概不能引用。

有些客户端会给图片链接加上边框，要去除边框：

1	<img border="0" src="xxx" alt="xxx">

不少客户端默认不显示图片（比如Gmail），加载前需要用户的许可。所以要确保即使没有图片，主要内容也能被阅读，最好为图片加上alt属性说明图片的内容让用户选择是否下载它们。